import React from 'react'
import {withRouter,} from 'react-router-dom'
import {log} from "../../utils/commonfunc";
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import playerSrc from "../../res/images/web/vote/列表／黄色卡片@2x.png"
import lineupSrc from "../../res/images/web/vote/列表／绿色卡片@2x.png"
import forecastSrc from "../../res/images/web/vote/列表／蓝色卡片@2x.png"
import favoriteTeamSrc from "../../res/images/web/vote/喜欢球队@2x.png"
import bestShooterSrc from "../../res/images/web/vote/最佳射手.png"
import bestPlayerSrc from "../../res/images/web/vote/最佳球员.png"
import greenGoSrc from "../../res/images/web/vote/yellow-go.png"
import orangeGoSrc from "../../res/images/web/vote/orange-go.png"
import redGoSrc from "../../res/images/web/vote/red-go.png"

import './vote-list.css'
import {getVoteListReq} from "../../apis/goApis";
import {Icon, NavBar, Toast} from "antd-mobile";
import {test} from "../../utils/constants";
import {goBack} from "../../utils/goback";

class VoteList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            p: 0,
            type: '',
            end: false,
            imgLoad: false,
            fromWebview: false,
        }
        this.flags = {
            'player': 1,
            'line-up': 2,
            'forecast': 3,
        }
    }

    componentDidMount() {
        this.setState({
            fromWebview: this.searchParams().webview === 'true',
        }, () => this.all())
    }

    searchParams = () => {
        const search = window.location.search
            .slice(1)
            .split('&')
            .map(keyValue => {
                return keyValue.split('=')
            })
            .reduce((acc, cur) => {
                acc[cur[0]] = cur[1]
                return acc
            }, {})
        return search
    }

    all() {
        const type = this.props.match.params.type
        this.setState({
            type: type,
        } , () => {
            const flags = this.flags
            const flag = flags[type]
            const params = {
                P: this.state.p,
                Flag: flag,
            }

            getVoteListReq(params)
                .then(res => {
                    const list = res.data.ok
                    if (list) {
                        this.setState({
                            list: [...this.state.list, ...list],
                            end: list.length < 10,
                        })
                    }
                })
        })

    }

    onScroll = (e) => {
        const ctn = this.ctn
        const top = ctn.scrollTop
        const scrollHei = ctn.scrollHeight
        const ctnHei = ctn.clientHeight
        if (top + ctnHei === scrollHei) {
            // if (this.state.end && this.state.list.length > 0) {
            //     Toast.info('已经没有数据', 0.5)
            // } else {
            //     this.setState({
            //         p: this.state.p + 1,
            //     }, () => this.get())
            // }
            if (this.state.end) {
                Toast.info('无更多数据', 0.5)
            } else {
                this.setState({
                    p: this.state.p + 1,
                }, () => this.all())
            }
        }
    }

    // onListItemImageLoad = () => {
    //     const load = this.state.imgLoad
    //     if (load === false) {
    //         this.setState({
    //             imgLoad: true,
    //         })
    //     }
    // }

    render() {
        const history = this.props.history
        const list = this.state.list
        const type = this.state.type
        const main = <div
            className='pd-12 flex-space-between-align-center flex-wrap-container'
            style={{
                maxHeight: this.state.fromWebview ? window.innerHeight : window.innerHeight - 45 - 24,
                overflowY: 'scroll',
            }}
            onScroll={this.onScroll}
            ref={el => this.ctn = el}
        >
            {list.map((data, index) => {

                const value = data.Value
                let src, goSrc, title, color
                if (type === 'player') {
                    src = playerSrc
                    goSrc = greenGoSrc
                    title = value.Title
                    color = '#CD5700'
                } else if (type === 'line-up') {
                    src = lineupSrc
                    goSrc = orangeGoSrc
                    title = value.Match
                    color = '#fff'
                } else if (type === 'forecast') {
                    let flag = value.Stype
                    title = value.Title
                    goSrc = redGoSrc
                    color = '#0070DF'
                    // const forecastSrcs = [
                    //     favoriteTeamSrc,
                    //     bestShooterSrc,
                    //     bestPlayerSrc,
                    // ]
                    // src = forecastSrcs[flag - 1]
                    src = forecastSrc
                }
                return <div
                    key={index}
                    className='vote-list-item-container flex-center-align-center'
                    onClick={() => {
                        let end = `../vote/${type}/${value.Id}`
                        const params = this.searchParams()
                        if (params.webview === 'true') {
                            end += '?webview=true'
                            if (params.uid) {
                                end += `&uid=${params.uid}`
                            }
                            if (params.token) {
                                end += `&token=${params.token}`
                            }
                        }
                        history.push(end)
                    }}
                    style={{
                        background: `no-repeat url(${src}) center/cover`,
                    }}
                >
                    <p
                        style={{
                            color: color,
                            fontSize: '20px',
                            fontWeight: 500,
                            lineHeight: '20px',
                        }}
                    >{title}</p>
                    {/*<img*/}
                    {/*    src={src}*/}
                    {/*    alt=''*/}
                    {/*    className='vote-list-item-bg'*/}
                    {/*    onLoad={() => this.onListItemImageLoad()}*/}
                    {/*/>*/}
                    {/*<div*/}
                    {/*    className='vote-list-item-button'*/}
                    {/*>*/}
                    {/*    <p>*/}
                    {/*        {title}*/}
                    {/*    </p>*/}
                    {/*    <div style={{position: 'relative',}}>*/}
                    {/*        <img src={goSrc} className='vote-list-item-go' alt=''/>*/}
                    {/*    </div>*/}
                    {/*</div>*/}
                </div>
            })}
        </div>

        const left = (
            <div className='flex-space-between-align-center'>
                {this.state.fromWebview
                    ? <a href={test ? 'http://123.207.85.242:8080/home' : 'http://www.youtoball.com:8080/home'}>
                        <Icon type="left" size='lg' style={{color: '#333'}}/>
                    </a>
                    : <Icon type="left" size='lg' style={{color: '#333'}} onClick={() => this.props.history.goBack()}/>
                }
            </div>
        )
        return <>
            <NavBar
                mode="light"
                icon={left}
            >
                评选活动
            </NavBar>
            {main}
            {/*<GoBackLayout*/}
            {/*    mainTitle='评选活动'*/}
            {/*    history={history}*/}
            {/*    toIndex={this.state.fromWebview ?*/}
            {/*        test*/}
            {/*            ? 'http://test.youtoball.com:8080/home'*/}
            {/*            : 'http://www.youtoball.com:8080/home'*/}
            {/*        : ''*/}
            {/*    }*/}
            {/*>*/}
            {/*    {main}*/}
            {/*</GoBackLayout>*/}
        </>
        // return this.state.fromWebview
        //     ? main
        //     : <>
        //         <GoBackLayout
        //             mainTitle='评选活动'
        //             history={history}
        //         >
        //             {main}
        //         </GoBackLayout>
        //     </>
    }

}

export default withRouter(VoteList)